const nextBtn = document.getElementById("next-btn");
const prevBtn = document.getElementById("prev-btn");

nextBtn.addEventListener("click", showNextImage);
prevBtn.addEventListener("click", showPrevImage);

//document.getElementsByClassName返回HTML collection，所以我们使用 "Array.from" 方法来获取一个可迭代的对象

const images = Array.from(document.getElementsByClassName("carousel__img"));
const totalImages = images.length;

let currentImageIndex = 0; //正在屏幕上显示的图像的索引
function addTransitionEffectToImages() {
    images.forEach((img) => {
        img.style.transition = "transform 0.8s ease";
    });
}

function showNextImage() {
    //如果我们在最后一张图像上重置轮播图
    if (currentImageIndex == totalImages - 1) {
        resetCarousel();
        return;
    }

    if (currentImageIndex === 0) addTransitionEffectToImages();
    //每次移动到下一张图像时将所有图像都向左移动-100%
    images.forEach((img) => {
        img.style.transform = `translate(${(currentImageIndex + 1) * -100}%)`;
    });
    currentImageIndex++;
}
function showPrevImage() {
    if (currentImageIndex === 0) return; //如果我们在第一张图像上，那么直接返回

    //在showNextImage中所做的逻辑相反
    images.forEach((img) => {
        img.style.transform = `translateX(${(currentImageIndex - 1) * -100}%)`;
    });
    currentImageIndex--;
}